<template>
  <div>
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="100px"
    >
      <el-form-item
        label-width="100px"
        label="输入框"
        prop="input_1617631725460"
      >
        <el-input
          v-model="formData.input_1617631725460"
          placeholder="请输入"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item
        label-width="100px"
        label="文本框"
        prop="textarea_1617631725861"
      >
        <el-input
          v-model="formData.textarea_1617631725861"
          placeholder="请输入输入框"
          clearable
          :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <el-form-item
        label-width="100px"
        label="数字输入框"
        prop="number_1617631726321"
      >
        <el-input
          v-model="formData.number_1617631726321"
          placeholder="请输入输入框"
          clearable
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <el-form-item
        label-width="100px"
        label="下拉选择器"
        prop="select_1617631726681"
      >
        <el-select
          v-model="formData.select_1617631726681"
          placeholder="请输入输入框"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in select_1617631726681Options"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label-width="100px"
        label="多选框"
        prop="checkbox_1617631727081"
      >
        <el-checkbox-group
          v-model="formData.checkbox_1617631727081"
          size="medium"
        >
          <el-checkbox-button
            v-for="(item, index) in checkbox_1617631727081Options"
            :key="index"
            :label="item.value"
            :disabled="item.disabled"
            >{{ item.label }}</el-checkbox-button
          >
        </el-checkbox-group>
      </el-form-item>
      <el-form-item
        label-width="100px"
        label="单选框"
        prop="radio_1617631727417"
      >
        <el-radio-group v-model="formData.radio_1617631727417" size="medium">
          <el-radio-button
            v-for="(item, index) in radio_1617631727417Options"
            :key="index"
            :label="item.value"
            :disabled="item.disabled"
            >{{ item.label }}</el-radio-button
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label-width="100px"
        label="日期选择"
        prop="date_1617631728009"
      >
        <el-date-picker
          v-model="formData.date_1617631728009"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :style="{ width: '100%' }"
          placeholder="请选择"
          clearable
        ></el-date-picker>
      </el-form-item>
      <el-form-item
        label-width="100px"
        label="日期范围"
        prop="date_1617631728429"
      >
        <el-date-picker
          type="daterange"
          v-model="formData.date_1617631728429"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :style="{ width: '100%' }"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          range-separator="至"
          clearable
        ></el-date-picker>
      </el-form-item>
      <el-form-item
        label-width="100px"
        label="时间范围"
        prop="time_1617631728793"
      >
        <el-time-picker
          v-model="formData.time_1617631728793"
          is-range
          format="HH:mm:ss"
          value-format="HH:mm:ss"
          :style="{ width: '100%' }"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          range-separator="至"
          clearable
        ></el-time-picker>
      </el-form-item>
      <el-form-item
        label-width="100px"
        label="时间选择"
        prop="time_1617631729190"
      >
        <el-time-picker
          v-model="formData.time_1617631729190"
          format="HH:mm:ss"
          value-format="HH:mm:ss"
          :picker-options="{ selectableRange: '00:00:00-23:59:59' }"
          :style="{ width: '100%' }"
          placeholder="请选择"
          clearable
        ></el-time-picker>
      </el-form-item>
      <el-form-item label-width="100px" label="评分" prop="rate_1617631729569">
        <el-rate v-model="formData.rate_1617631729569"></el-rate>
      </el-form-item>
      <el-form-item
        label-width="100px"
        label="开关"
        prop="switch_1617631730377"
        required
      >
        <el-switch v-model="formData.switch_1617631730377"></el-switch>
      </el-form-item>
      <el-form-item
        label-width="100px"
        label="级联选择器"
        prop="cascader_1617631730736"
      >
        <el-cascader
          v-model="formData.cascader_1617631730736"
          :props="undefinedProps"
          :style="{ width: '100%' }"
          placeholder="请选择"
          clearable
        ></el-cascader>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formData: {
        input_1617631725460: "",
        textarea_1617631725861: "",
        number_1617631726321: "",
        select_1617631726681: "",
        checkbox_1617631727081: "",
        radio_1617631727417: "",
        date_1617631728009: "",
        date_1617631728429: "",
        time_1617631728793: "",
        time_1617631729190: "",
        rate_1617631729569: "",
        switch_1617631730377: "",
        cascader_1617631730736: ""
      },
      rules: {
        input_1617631725460: [
          {
            required: "true",
            message: "必填项",
            trigger: "blur"
          }
        ],
        textarea_1617631725861: [
          {
            required: "true",
            message: "必填项",
            trigger: "blur"
          }
        ],
        number_1617631726321: [
          {
            required: "true",
            message: "必填项",
            trigger: "blur"
          }
        ],
        select_1617631726681: [
          {
            required: "true",
            message: "必填项",
            trigger: "change"
          }
        ],
        checkbox_1617631727081: [
          {
            required: "true",
            message: "必填项",
            trigger: "change"
          }
        ],
        radio_1617631727417: [
          {
            required: "true",
            message: "必填项",
            trigger: "change"
          }
        ],
        date_1617631728009: [
          {
            required: "true",
            message: "必填项",
            trigger: "change"
          }
        ],
        date_1617631728429: [
          {
            required: "true",
            message: "必填项",
            trigger: "change"
          }
        ],
        time_1617631728793: [
          {
            required: "true",
            message: "必填项",
            trigger: "change"
          }
        ],
        time_1617631729190: [
          {
            required: "true",
            message: "必填项",
            trigger: "change"
          }
        ],
        rate_1617631729569: [
          {
            required: "true",
            message: "必填项",
            trigger: "change"
          }
        ],
        switch_1617631730377: [
          {
            required: "true",
            message: "必填项",
            trigger: "undefined"
          }
        ],
        cascader_1617631730736: [
          {
            required: "true",
            message: "必填项",
            trigger: "change"
          }
        ]
      },
      select_1617631726681Options: [
        [
          {
            value: "1",
            label: "下拉框1"
          },
          {
            value: "2",
            label: "下拉框2"
          }
        ]
      ],
      checkbox_1617631727081Options: [
        [
          {
            value: "1",
            label: "下拉框1"
          },
          {
            value: "2",
            label: "下拉框2"
          }
        ]
      ],
      radio_1617631727417Options: [
        [
          {
            value: "1",
            label: "选项1"
          },
          {
            value: "2",
            label: "选项2"
          },
          {
            value: "3",
            label: "选项3"
          }
        ]
      ],
      cascader_1617631730736Options: [
        [
          {
            value: "1",
            label: "选项1"
          },
          {
            value: "2",
            label: "选项2"
          },
          {
            value: "3",
            label: "选项3"
          }
        ]
      ]
    };
  }
};
</script>
<style lang="scss" scoped></style>
